<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>其它布局</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./orther.css">
    <link id="changestyle" rel="stylesheet" href="./css/float.css">
</head>

<body>
    <div class="change">
        选择布局方式：<button id="float">Float</button><button id="position">Position</button><button
            id="flexbox">Flexbox</button>
        <a href="../../index.html">返回</a>
    </div>

    <h1 id="top">圣杯布局</h1>
    <div id="holy-grail">
        <div id="center" class="column">
            width: 100%; <br>
            需要给 body 设置最小宽度，避免浏览器拉伸变型 <br>
            min-width = 左边 * 2 + 右边，中间宽度 小于 左边宽度 就会变型
        </div>
        <div id="left" class="column">
            width: 200px; <br>
            margin-left: -100%; <br>
            right: 210px;
        </div>
        <div id="right" class="column">
            width: 180px; <br>
            margin-left: -180px; <br>
            left: 190px;
        </div>
    </div>

    <h1>双飞翼布局</h1>
    <div id="wings">
        <div id="main">
            <div id="w-center">
                margin: 0 210px; <br>
                与圣杯布局不同的是，使用的是 magin，并且盒子比较稳定，不会因为伸缩变型，不需要设置 min-width
            </div>
        </div>
        <div id="sub">margin-left: -100%;</div>
        <div id="extra">margin-left: -200px;</div>
    </div>

    <h1>两栏布局，左侧占30%宽度，右侧占70%宽度</h1>
    <div class="container container1">
        <div class="left">
            width: 30%;
            <hr>
            float: left;
            <hr>
            position: absolute;
            left: 0;
            <hr>
            flex: 3;
        </div>
        <div class="right">
            width: 70%;
            <hr>
            float: left;
            <hr>
            position: absolute;
            right: 0;
            <hr>
            flex: 7;
        </div>
    </div>

    <h1>两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化</h1>
    <div class="container container2">
        <div class="left2 left">
            width: 300px;
            <hr>
            float: left;
            <hr>
            position: absolute;
            left: 0;
            <hr>
            flex: 0 0 300px;
        </div>
        <div class="right2 right">
            width: 100%;
            <hr>
            float: none;
            padding-left: 300px;
            <hr>
            padding-left: 300px;
            <hr>
            flex: 1;
        </div>
    </div>

    <h1>两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化</h1>
    <div class="container container3">
        <div class="left3 left">
            width: 300px;
            <hr>
            float: right;
            <hr>
            position: absolute;
            right: 0;
            <hr>
            flex: 1;
        </div>
        <div class="right3 right">
            width: 100%;
            <hr>
            float: none;
            padding-right: 300px;
            <hr>
            padding-right: 300px;
            <hr>
            flex: 0 0 300px;
        </div>
    </div>

    <h1>三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化</h1>
    <div class="container container4">
        <div class="center">
            width: 100%;
            <hr>
            float: left;
            padding: 0 300px;
            <hr>
            padding: 0 300px;
            <hr>
            flex: 1;
            order: 2;
        </div>
        <div class="left4 left">
            width: 300px;
            <hr>
            float: left;
            margin-left: -100%;
            <hr>
            position: absolute;
            left: 0;
            top: 0;
            <hr>
            flex: 0 0 300px;
            order: 1;
        </div>
        <div class="right4 right">
            width: 300px;
            <hr>
            float: left;
            margin-left: -300px;
            <hr>
            position: absolute;
            right: 0;
            top: 0;
            <hr>
            flex: 0 0 300px;
            order: 3;
        </div>
    </div>

    <h1>三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化</h1>
    <div class="container container5">
        <div class="center">
            width: 500px;
            <hr>
            float: left;
            margin-left: 300px;
            <hr>
            position: absolute;
            top: 0;
            left: 300px;
            <hr>
            flex: 0 0 500px;
            order: 2;
        </div>
        <div class="left5 left">
            width: 300px;
            <hr>
            float: left;
            margin-left: -800px;
            <hr>
            position: absolute;
            left: 0;
            top: 0;
            <hr>
            flex: 0 0 300px;
            order: 1;
        </div>
        <div class="right5 right">
            width: 100%;
            <hr>
            float: none;
            padding-left: 800px;
            <hr>
            padding-left: 800px;
            <hr>
            flex: 1;
            order: 3;
        </div>
    </div>

    <script>
        var float = document.querySelector("#float")
        var position = document.querySelector("#position")
        var flexbox = document.querySelector("#flexbox")
        var changestyle = document.querySelector("#changestyle")
        float.onclick = function (e) {
            changestyle.href = "./css/float.css"
        }
        position.onclick = function (e) {
            changestyle.href = "./css/position.css"
        }
        flexbox.onclick = function (e) {
            changestyle.href = "./css/flexbox.css"
        }
    </script>
</body>

</html>